<template>
  <div class="breadcrumb-box">
    <t-row style="width: 100%">
      <t-col :span="6">
        <div class="tab-boxs">
          <div class="tab-content">
            <div @click="change(2)" class="tab-content-item" :class="{ 'item-active': tabvalue === 2 }">
              <i class="doorIcon">&#xe681;</i>
              <span>策展大纲</span>
            </div>
            <div @click="change(1)" class="tab-content-item" :class="{ 'item-active': tabvalue === 1 }">
              <i class="freeIcon">&#xe651;</i>
              <span>{{ route.name !== 'templateSquare' ? '场景设置' : '选择场景' }}</span>
              <!-- <span>{{ store.styleInfo.id !== 0 ? '模版设置' : '选择模版' }}</span> -->
            </div>
          </div>
        </div>
      </t-col>
      <t-col :span="6">
        <!-- <div>
          https://static.jiyi.show/assets/img/workIcon.png  
        </div> -->
        <div class="hw-box-end-box hw-box-style-flex-r-center">
          <!-- <div class="step-box">  
            <i class="freeIcon" @click="store.fallbackAction" :class="{'freeIcon-lock':store.HistoryList===0}">&#xe642;</i>
            <div class="step-solid"></div>
            <i class="freeIcon" @click="store.recovery" :class="{'freeIcon-lock':store.HistoryList>=store.recoveryList.length-1}">&#xe64a;</i>
          </div> -->
          <!-- <t-tooltip
            class="placement bottom center"
            :content="store.previewMode === 1?'展开':'折叠'"
            :overlay-style="{ width: '48px' }"
            placement="bottom"  
            show-arrow
          >
 
          <div class="save-box save-box-6" @click="store.previewMode === 1?store.previewMode = 2:store.previewMode = 1">
            <i class="doorIcon" v-if="store.previewMode === 1">&#xe622;</i>
            <i class="doorIcon" v-else>&#xe621;</i>
          </div> 
          </t-tooltip> -->
          <router-link class="square-box" :to="{ name: 'templateSquare' }" @click="openSquare">
            <img :src="publicUrls + 'assets/img/workIcon.png'" alt="" />
            <span>素材广场</span>
          </router-link>
          <div class="save-box save-box-3 kfid" @click.stop="store.replaceSceneShow = true">
            <i class="freeIcon">&#xe648;</i>
            <span>背景更换</span>
          </div>

          <!-- store.styleInfo.id &&  -->
          <div class="save-box" @click.stop="saveConfigSetting(1)">
            <i class="doorIcon">&#xe685;</i>
            <span>保存</span>
          </div>
          <!-- v-if="store.styleInfo.id" -->
          <a class="edit-btn" size="large" variant="outline" @click.stop="look">
            <i class="doorIcon">&#xe684;</i>
            <span>预览</span>
          </a>
          <t-tooltip
            class="placement bottom center"
            content="客服"
            :overlay-style="{ width: '48px' }"
            placement="bottom"
            show-arrow
          >
            <a class="save-box save-box-2" href="https://work.weixin.qq.com/kfid/kfc4549926862f80760" target="_blank">
              <i class="doorIcon">&#xe677;</i>
            </a>
          </t-tooltip>
          <!-- :loading="loading" -->
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { publicUrls } from '@/utils/minxin';
import { workbenchUrl } from '@/utils/minxin';
import { DateRangePicker, MessagePlugin } from 'tdesign-vue-next';
import { saveConfig } from '@/api/templates/templates';
// import LBreadcrumb from './Breadcrumb.vue';
import { computed, ref, onUnmounted, watch, nextTick } from 'vue';
import type { PropType } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/store';
import { getActive } from '@/router';
import { prefix } from '@/config/global';
import LogoFull from '@/assets/assets-logo-full.svg?component';
import type { MenuRoute } from '@/types/interface';
import { useProjectStore } from '@/store';
import { curatorlogin } from '@/api/user/user';
import { storeToRefs } from 'pinia';

const store = useProjectStore();
const userStore = useUserStore();

import Notice from '../freeComponents/Notice.vue';
import Search from '../freeComponents/Search.vue';
import MenuContent from '../freeComponents/MenuContent.vue';
// tabvalue
const props = defineProps({
  theme: {
    type: String,
    default: '',
  },
  layout: {
    type: String,
    default: 'top',
  },
  showLogo: {
    type: Boolean,
    default: true,
  },
  menu: {
    type: Array as PropType<MenuRoute[]>,
    default: () => [],
  },
  isFixed: {
    type: Boolean,
    default: false,
  },
  isCompact: {
    type: Boolean,
    default: false,
  },
  maxLevel: {
    type: Number,
    default: 3,
  },
});

const loading = ref(false);
const tabvalue = ref(1);
const router = useRouter();
const route = useRoute();

store.$patch((state) => {
  state.tabvalue = 2;
});
tabvalue.value = store.tabvalue;
const toggleSettingPanel = () => {};

const active = computed(() => getActive());
const init = async () => {
  //展示屏蔽获取登录信息
  try {
    let res = await curatorlogin();
    if (res.data) {
      userStore.setVipLevel(res.data.companys[0]?.level);
    }
  } catch (err) {
    // console.log('获取登录信息', err);
  }
};
init();

const openSquare = () => {
  tabvalue.value = 1;
  nextTick(() => {
    store.$patch((state) => {
      state.tabvalue = 1;
    });
  });
};

const change = (e: number) => {
  if (e === tabvalue.value) {
    return;
  }
  tabvalue.value = e;
  store.getFreeInfoData();
  store.exhibitsInfoShow = false;
  store.$patch((state) => {
    state.tabvalue = tabvalue.value;
  });
};
const saveConfigSetting = async (types?: number) => {
  store.SaveFreeInfoData();
  MessagePlugin.success('保存成功');
};
const look = () => {
  const url = window.location.href;
  const regex = /\/(\d+)/; // 匹配数字参数的正则表达式
  const match = url.match(regex); // 使用正则表达式匹配数字参数
  const numericParam = parseInt(match[1]); // 提取数字参数并将其转换为数字类型
  let lookUrl: string =
    workbenchUrl + 'projectPreview?projectId=' + numericParam + '&mode=2&previewId=' + store.previewId;
  // store.setglanceOver();
  window.open(lookUrl, '_blank');
};
if (store.glanceOver) {
  store.setglanceOver();
}
const handleNav = (url) => {
  router.push(url);
};

const handleLogout = () => {
  userStore.logout();
};
// watch(
//   () => store.tabvalue,
//   () => {
//     tabvalue.value = store.tabvalue;
//   },
//   { deep: true },
// );
</script> 
<style lang="less" scoped>
.breadcrumb-box {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-right: 24px;
  height: 48px;
  width: 100vw;
  background: #f5f5f5;
  z-index: 110;
  height: 48px;
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  z-index: 1600;
}

.t-col {
  display: flex;
  align-items: center;
  margin: 0;
  height: 48px;
}
.t-row {
  margin: 0;
}
.tab-boxs {
  display: flex;
  align-items: flex-end;
  width: 100%;
  font-family: PingFangSC-Regular, PingFang SC Microsoft YaHei;
  :deep(.t-tabs__nav-item-text-wrapper) {
    font-family: PingFangSC-Regular, PingFang SC Microsoft YaHei;
  }
}

.tab-content {
  position: relative;
  display: flex;
  height: 46px;
  margin-top: 2px;
}
.tab-content-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 148px;
  height: 46px;
  border-radius: 6px 6px 0px 0px;
  .doorIcon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.59);
  }
  .freeIcon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.59);
  }
  span {
    font-size: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.59);
    line-height: 24px;
    margin-left: 4px;
  }
}
.item-active {
  background: #ffffff;
  box-shadow: inset 1px 0px 0px 0px #f0f0f0, inset -1px 0px 0px 0px #f0f0f0;
  span {
    color: rgba(230, 43, 23, 1);
  }
  .doorIcon,
  .freeIcon {
    color: rgba(230, 43, 23, 1);
  }
}

:deep(.t-tabs) {
  background: #faf9f7;
}
.save-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 32px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  margin-left: 8px;
  .doorIcon {
    font-size: 24px;
    margin-right: 4px;
    color: rgba(0, 0, 0, 0.8);
  }
  .freeIcon {
    font-size: 24px;
    margin-right: 4px;
    color: rgba(0, 0, 0, 0.8);
  }
  span {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
  }
}
.save-box:hover {
  background: #f0f0f0;
}
.save-box-2 {
  width: 32px;
  height: 32px;
  .doorIcon {
    margin-right: 0px;
  }
}
.save-box-3 {
  width: 104px;
}
.edit-btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 82px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #e62b17;
  margin-left: 8px;
  span {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 24px;
  }
  .doorIcon {
    font-size: 24px;
    line-height: 16px;
    color: #e62b17;
    margin-right: 4px;
  }
}
.edit-btn:hover {
  background: #ffece6;
}
.hw-box-end-box {
  :deep(.t-button) {
    width: 64px;
    height: 32px;
  }
  :deep(.t-button:hover) {
    width: 64px;
    height: 32px;

    background: #f2573f;
  }
}
.square-box {
  display: flex;
  align-items: center;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #e62b17;
  padding: 0 8px;
  img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 24px;
  }
}
.square-box:hover {
  background: #ffece6;
}

.cancat-box:hover {
  background: #ffffff;
}
.step-box {
  display: flex;
  height: 32px;
  align-items: center;
  .freeIcon {
    cursor: pointer;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.59);
  }
  .step-solid {
    width: 16px;
    height: 12px;
    box-shadow: inset -1px 0px 0px 0px #e6e6e6;
    margin-right: 16px;
  }
  .freeIcon-lock {
    color: rgba(0, 0, 0, 0.15);
  }
}
.kfid {
  margin-left: 24px;
}
.save-box-6{
margin-right: 24px;
}
</style>
